<template>
  <div class="app-container calendar-list-container"> 
    <!-- 卡片列表 -->
    <el-tabs v-model="active" type="card" @tab-click="handleClick">
      <el-tab-pane :label="$t('financial.Labor_cost')" name="first"></el-tab-pane>
      <el-tab-pane :label="$t('financial.General_cost')" name="second"></el-tab-pane>
    </el-tabs>
    <!-- 卡片 -->
    <div style="margin-bottom:20px">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12" :span="12" ref='anitem'  v-for="item in data" :key='item.key'>
          <el-card >
            <div slot="header" style='display:flex;justify-content:space-between'>
              <span>
                {{$t(item.lang)}}
              </span>
              <el-tag>{{$t('financial.All')}}</el-tag>
            </div>
            <count-to class="card-panel-num" :startVal="0" :endVal="item.value" :duration="item.duration"></count-to>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 头部 -->
    <div class="filter-container">
      {{$t('financial.Staff_number')}}
      <el-input clearable v-model="listQuery.staffId" style="width: 200px;margin-right:50px;margin-top:8px;margin-left:10px" class="filter-item" :placeholder="$t('financial.Please_enter_staff_number')" >
      </el-input>
      <el-button  type='button' icon="el-icon-search" class='el-button el-button--primary' @click="handleFilter">{{$t('financial.Search')}}</el-button>
      <el-button  type='button' icon="el-icon-download" class='el-button el-button--primary' @click="handleDownload">{{$t('financial.Export')}}</el-button>
      <el-button  type='button' icon="el-icon-plus" class='el-button el-button--primary' @click="newFormVisible = true">{{$t('financial.Add')}}</el-button>
    </div>
    <!-- 一般支出 -->
    <el-table
      :data="income"
      border
      v-loading='loading.income'
      style="width: 100%">
      <el-table-column prop="staffNumber" :label="$t('financial.Staff_ID')"> </el-table-column>
      <el-table-column prop="staffId" :label="$t('financial.Staff_number')"> </el-table-column>
      <el-table-column prop="staffName" :label="$t('financial.Staff_name')"> </el-table-column>
      <el-table-column :label="$t('financial.Gender')">
        <template slot-scope="scope">
          <div>{{scope.row.gender==1?"男":"女"}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="post" :label="$t('financial.Staff_position')"> </el-table-column>
      <el-table-column prop="contractType" :label="$t('financial.Contract_type')"> </el-table-column>
      <el-table-column :label="$t('financial.Employeed_date')">
        <template slot-scope="scope">
          <div>{{scope.row.entryTime | parseTime}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('financial.Monthly_salary')">
        <template slot-scope="scope">
          <div>{{scope.row.monthlySalary + '元'}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('financial.Annual_salary')">
        <template slot-scope="scope">
          <div>{{scope.row.annualSalary + '元'}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="abn" label="ABN"> </el-table-column>
      <el-table-column prop="tfn" label="TFN"> </el-table-column>
      <el-table-column :label="$t('financial.Operate')" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div class="fx">
              <el-button  size="mini" type="primary" @click="change(scope.row)">{{$t('financial.Edit')}}</el-button>
              <el-button  size="mini" type="danger" @click="del(scope.row.id)">{{$t('financial.Delete')}}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange1" 
      @current-change="handleCurrentChange1" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total1">
      </el-pagination>
    </div>
    <!-- 修改支出 -->
    <el-dialog :title="$t('financial.Modify')" :visible.sync="upFormVisible" style="width:800px;margin:0 auto;">
      <el-form :model="upform" :rules='bindRules1' ref="bindForm1">
        <el-form-item :label="$t('financial.Staff_number')" prop='staffNumber'>
          <el-input v-model="upform.staffNumber" style="width:240px;margin-right:10px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Gender')">
          <el-select v-model="upform.gender" :placeholder="$t('financial.Please_select')" style="width:240px;margin-left:35px" @change="getSex">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('financial.Staff_position')" prop='post'>
          <el-input v-model="upform.post" style="width:240px;margin-right:10px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Contract_type')" prop='contractType'>
          <el-input v-model="upform.contractType" style="width:240px;margin-right:10px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Employeed_date')"  prop='entryTime'>
          <el-date-picker
            v-model="upform.entryTime"
            type="date"
            :placeholder="$t('financial.Select_time')"
            value-format="timestamp"
            style="margin-right:20px;width:240px">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('financial.Monthly_salary')" prop='monthlySalary'>
          <el-input v-model="upform.monthlySalary" style="width:240px;margin-right:10px;margin-left:25px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Annual_salary')" prop='annualSalary'>
          <el-input v-model="upform.annualSalary" style="width:240px;margin-right:10px;margin-left:24px"></el-input>
        </el-form-item>
        <el-form-item label="ABN" prop='abn'>
          <el-input v-model="upform.abn" style="width:240px;margin-right:10px;margin-left:22px"></el-input>
        </el-form-item>
        <el-form-item label="TFN" prop='tfn'>
          <el-input v-model="upform.tfn" style="width:240px;margin-right:10px;margin-left:22px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upFormVisible = false">{{$t('financial.Cancel')}}</el-button>
        <el-button type="primary" @click="upForm">{{$t('financial.Confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 新增支出 -->
    <el-dialog :title="$t('financial.Add')" :visible.sync="newFormVisible" style="width:800px;margin:0 auto;">
      <el-form :model="form" :rules='bindRules' ref="bindForm">
        <el-form-item :label="$t('financial.Staff_ID')" prop="staffId">
          <el-input v-model="form.staffId" style="width:240px;margin-right:10px;margin-left:13px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Monthly_salary')"  prop='staffNumber'>
          <el-input v-model="form.staffNumber" style="width:240px;margin-right:10px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Staff_name')" prop="staffName">
          <el-input v-model="form.staffName" style="width:240px;margin-right:10px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Gender')" prop='gender'>
          <el-select v-model="form.gender" :placeholder="$t('financial.Please_select')" style="width:240px;margin-left:37px" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('financial.Staff_position')" prop='post'>
          <el-input v-model="form.post" style="width:240px;margin-right:10px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Contract_type')" prop='contractType'>
          <el-input v-model="form.contractType" style="width:240px;margin-right:10px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Employeed_date')" prop='entryTime'>
          <el-date-picker
              v-model="form.entryTime"
              type="date"
              :placeholder="$t('financial.Select_time')"
              value-format="timestamp"
              style="margin-right:20px;margin-left:8px;width:240px">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('financial.Monthly_salary')" prop='monthlySalary'>
          <el-input v-model="form.monthlySalary" style="width:240px;margin-right:10px;margin-left:25px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Annual_salary')" prop='annualSalary'>
          <el-input v-model="form.annualSalary" style="width:240px;margin-right:10px;margin-left:25px"></el-input>
        </el-form-item>
        <el-form-item label="ABN" prop='abn'>
          <el-input v-model="form.abn" style="width:240px;margin-right:10px;margin-left:24px"></el-input>
        </el-form-item>
        <el-form-item label="TFN" prop='tfn'>
          <el-input v-model="form.tfn" style="width:240px;margin-right:10px;margin-left:25px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newFormVisible = false">{{$t('financial.Cancel')}}</el-button>
        <el-button type="primary" @click="newForm">{{$t('financial.Confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getPersonalaufwandListByPage ,addPersonalaufwand ,deletePersonalaufwandById ,updatePersonalaufwandById} from '@/api/financial'
import VePie from 'v-charts/lib/pie'
import VeHistogram from 'v-charts/lib/histogram'
import { parseTime} from '@/utils'
export default {
  name: 'financial_normalWithdrawal',
  data() {
    return {
      active:'first',
      total1: 0,
      income: [],
      options: [{
        value: '1',
        label:'男'
      }, 
      {
        value: '2',
        label:'女'
      }],
      listQuery:{
        pageNo: 1,
        pageSize: 10,
        staffId: '',
      },
      dialog: {
        add: false
      },
      loading: {
        income: false,
        withdraw: false,
        reject:false
      },
      form:{
        staffId:"",
        staffNumber:"",
        staffName:"",
        gender:"",
        post:"",
        contractType:"",
        entryTime:"",
        monthlySalary:"",
        annualSalary:"",
        abn:"",
        tfn:"",
      },
      upform:{
        id:'',
        staffNumber:"",
        staffName:"",
        gender:"",
        post:"",
        contractType:'',
        entryTime:"",
        monthlySalary:"",
        annualSalary:"",
        abn:"",
        tfn:"",
      },
      upFormVisible:false,
      newFormVisible:false,
      data: [
      {
        key: 'monthCount',
        label: '每月人工支出',
        defaultLabel: '每月人工支出',
        value: 0,
        duration: 2500,
        lang:'financial.Monthly_labor_cost'
      },
      {
        key: 'yearCount',
        label: '每年人工支出',
        defaultLabel: '每年人工支出',
        value: 0,
        duration: 2500 ,
        lang:'financial.Annual_labor_cost'
      }],
      month:0,
      year:0,
      sex:'',
      bindRules:{
        staffId: [
          { required: true, message: "请输入员工ID", trigger: 'blur' }
        ],
        staffNumber: [
          { required: true, message: '请输入员工编号', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        staffName: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' }
        ],
        entryTime: [
          { required: true, message: '请输入入职时间', trigger: 'blur' }
        ],
        post: [
          { required: true, message: '请输入员工职位', trigger: 'blur' }
        ],
        contractType: [
          { required: true, message: '请输入合同类型', trigger: 'blur' }
        ],
        monthlySalary: [
          { required: true, message: '请输入月薪', trigger: 'blur' }
        ],
        annualSalary: [
          { required: true, message: '请输入年薪', trigger: 'blur' }
        ],
        abn: [
          { required: true, message: '请输入ABN', trigger: 'blur' }
        ],
        tfn: [
          { required: true, message: '请输入TFN', trigger: 'blur' }
        ],
      },
      bindRules1:{
        staffId: [
          { required: true, message: '请输入员工ID', trigger: 'blur' }
        ],
        staffNumber: [
          { required: true, message: '请输入员工编号', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        staffName: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' }
        ],
        entryTime: [
          { required: true, message: '请输入入职时间', trigger: 'blur' }
        ],
        post: [
          { required: true, message: '请输入员工职位', trigger: 'blur' }
        ],
        contractType: [
          { required: true, message: '请输入合同类型', trigger: 'blur' }
        ],
        monthlySalary: [
          { required: true, message: '请输入月薪', trigger: 'blur' }
        ],
        annualSalary: [
          { required: true, message: '请输入年薪', trigger: 'blur' }
        ],
        abn: [
          { required: true, message: '请输入ABN', trigger: 'blur' }
        ],
        tfn: [
          { required: true, message: '请输入TFN', trigger: 'blur' }
        ],
      },
    }
  },
  components: {
    VePie,
    VeHistogram,
    CountTo,
  },
  methods: {
    // 跳转
    handleClick(e){
      if(e.index == 1){
        this.$router.push('/financial/withdrawal')
      }
    },
    // 导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['员工ID', '员工编号', '员工姓名','	性别','员工职位', '合同类型','入职时间','月薪','年薪','ABN','TFN']
        const filterVal = ['staffId', 'staffNumber','staffName', 'gender','post','contractType', 'entryTime','monthlySalary','annualSalary','abn','tfn']
        const data = this.formatJson(filterVal, this.income)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '人工支出'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {     
        if(j==='gender'){
          return v[j] == 1?'男':'女'
        }
        if(j==='entryTime'){
          return parseTime(v[j]).split(' ')[0]
        }
        else{
          return v[j]
        }
      }))
    },
    // 获取修改一般支出的列表
    change(item){
      this.upform.id = item.id
      this.upFormVisible = true
      this.upform.staffNumber = item.staffNumber
      this.upform.staffName = item.staffName
      this.upform.gender = item.gender  == 1 ? '男':'女'
      this.sex = this.options.filter(item=>item.label == this.upform.gender)[0].value
      this.upform.post = item.post
      this.upform.contractType = item.contractType
      this.upform.entryTime = item.entryTime
      this.upform.monthlySalary = item.monthlySalary
      this.upform.annualSalary = item.annualSalary
      this.upform.abn = item.abn,
      this.upform.tfn = item.tfn
    },
    //修改性别
    getSex(val){
      this.sex = val
    },
    //修改列表成功
    upForm(){
      this.$refs['bindForm1'].validate(async (valid) => {
      if(valid){
        this.loading.income=true
        try {
          const { data } = await updatePersonalaufwandById ({...this.upform,gender:this.sex})
          this.upFormVisible = false
          this.$message({
            type: 'success',
            message: `修改成功!`
          });
        this.$refs['bindForm1'].resetFields()
        this.getList()
        } catch (error) {
          
        }
        this.loading.income = false
      }  
      })
    },
    // 删除一般支出
    async del(myid){
      console.log(myid)
      const{ data } = await deletePersonalaufwandById({
        id:myid
      })
      this.$message({
        type: 'success',
        message: `删除成功!`
      });
      this.getList()
    },
     //获取一般支出列表
    async getList(){
      this.loading.income=true
       const { data } = await getPersonalaufwandListByPage(this.filters)
       this.income = data.records.map((item,index)=>({
         index:index+1,
         ...item
       }))
      //  算总支出
      for(var i=0;i<this.income.length;i++)
      {
        this.month += this.income[i].monthlySalary
        this.year += this.income[i].annualSalary
      }
      this.data[0].value = this.month
      this.data[1].value = this.year
       this.total1 = data.total
       this.loading.income = false
    },
    //新增
    newForm(){
      this.$refs['bindForm'].validate(async (valid) => {
        if(valid){
          this.loading.income=true
          try {
            const { data } = await addPersonalaufwand (this.form)
            this.newFormVisible = false
            this.$message({
              type: 'success',
              message: `新增成功!`
            });
          this.$refs['bindForm'].resetFields()
          this.getList()
          } catch (error) {
            
          }
          this.loading.income = false
        }  
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange1(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange1(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
  },
  computed: {
    // 获取列表
    filters() {
      return {
        pageNo: this.listQuery.pageNo,
        pageSize: this.listQuery.pageSize,
        staffId: this.listQuery.staffId,
      }
    },
  },
  created() {
    this.getList();
  }
}
</script>

<style lang='scss' scoped>
.card-panel-num {
  font-size: 30px;
 
}
.el-col {
  margin-bottom: 8px;
}
.cell {
  a {
    color: #409eff;
  }
}
.card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.el-card /deep/ .el-card__header{
    border-bottom: none
}  

</style>
